<template>
    <view class="con">
        <view class="profit" @click="add_mycar_from">
            <view class="profit-con-name">添加车辆</view>
        </view>
        <view class="list">
            <view class="list-i">
                <view class="list-i-item" v-for="(item,index) in data.list" :key="index">
                    <view style="display: flex;align-items: center;">
                        <image :src="getImg(item.img)"></image>
                        <view class="list-i-item-time">
                            <view class="list-i-item-time-name">{{item.plate_no}}</view>
                            <view class="list-i-item-time-name">{{item.capacity}}吨</view>
                            <view class="list-i-item-time-t">{{item.add_time | date}}</view>
                        </view>
                    </view>
                    <view @click="editCar(item)" class="list-i-item-price">修改</view>
                </view>
                <u-loadmore :status="status" :load-text="loadText" />
            </view>
        </view>
        <u-popup v-model="show_mycar_from" mode="bottom">
            <mycar-form v-if="show_mycar_from" ref="popupMobile" :editFrom="editFrom" @reload_list="getList"
                @closewin="show_mycar_from=false"></mycar-form>
        </u-popup>
    </view>
</template>

<script>
    import MycarForm from './mycar_form.vue'

    export default {
        components: {
            MycarForm
        },
        data() {
            return {
                data: {},
                status: 'loading',
                editFrom: {
                    imgs: []
                },
                show_mycar_from: false,
                params: {
                    stime: '', //本周开始时间(时间戳)
                    etime: '', //本周结束时间(时间戳)
                    page: 1, //当前页数
                    limit: 20, //每页数量[不传默认20]
                },
                loadText: {
                    loadmore: '上拉加载更多',
                    loading: '加载中...',
                    nomore: '没有更多数据了'
                },
            }
        },
        onLoad() {
            this.getList();
        },
        methods: {

            add_mycar_from() {
                this.editFrom = {
                    plate_no: "",
                    capacity: "",
                    power_type: 1,
                    img: "",
                    imgs: []
                };
                this.show_mycar_from = true;
            },
            getImg(img) {
                let imgs = img ? img.split(",") : [];
                return imgs.length ? imgs[0] : "";
            },

            editCar(item) {
                item.imgs = item.img ? item.img.split(",") : []
                this.editFrom = item;
                this.show_mycar_from = true;
            },
            getList() {
                this.status = 'loading';
                this.$u.api.getCarList(this.params).then(res => {
                    // uni.hideLoading();
                    console.log(res);
                    if (this.params.page == 1) {
                        this.status = 'nomore';
                        this.data = res;
                    } else {
                        if (res.list <= 0) {
                            this.status = 'nomore';
                            this.params.page = this.olPage;
                            return;
                        }
                        this.olPage = this.params.page;
                        this.data.list = this.data.list.concat(res.list);
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .con {
        // padding: 30rpx;

        .profit {
            position: relative;
            width: 690rpx;
            margin: 30rpx;
            height: 100rpx;
            border-radius: 20rpx;
            background-color: #fffef4;
            display: flex;
            justify-content: center;
            align-items: center;

            .profit-con-name {
                color: #333333;
                font-size: 28rpx;
                text-align: center;
                font-weight: 900;
            }

        }

        .select-time {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #FFFFFF;
            margin: 0 30rpx 30rpx 30rpx;
            padding: 20rpx 30rpx;

            .select-time-s {
                width: 270rpx;
                height: 60rpx;
                background-color: #f7f7f7;
                border-radius: 10rpx;
                font-size: 28rpx;
                color: #999999;
                line-height: 60rpx;
                text-align: center;

                text {
                    margin-right: 30rpx;
                }
            }

            .select-time-z {
                font-size: 28rpx;
                color: #999999;
            }
        }

        .list {
            background-color: #FFFFFF;
            margin: 0 30rpx;
            border-radius: 20rpx;

            .list-title {
                font-size: 32rpx;
                color: #191919;
                font-weight: bold;
                padding: 40rpx;
                background-color: #FFFFFF;
                border-radius: 20rpx;
            }

            .list-i {

                padding-bottom: env(safe-area-inset-bottom);

                .list-i-item {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    border-bottom: 1rpx solid #f2f2f2;
                    padding: 30rpx;

                    image {
                        width: 58rpx;
                        height: 58rpx;
                        margin-right: 30rpx;
                    }

                    .list-i-item-time {


                        .list-i-item-time-name {
                            font-size: 28rpx;
                            color: #191919;
                            font-weight: bold;
                            width: 400rpx;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                        }

                        .list-i-item-time-t {
                            color: #999999;
                            font-size: 24rpx;
                        }
                    }

                    .list-i-item-price {
                        font-size: 36rpx;
                        color: #07c160;
                        font-weight: bold;
                    }
                }
            }
        }

    }

    .popup-view {
        padding-bottom: env(safe-area-inset-bottom);
        background-color: #f2f2f2;
    }
</style>